<template>
  <div class="nav">

    <ul class="navLeft">
      <li
      v-for="(navArrIt,navArrIdx) in navArr"
      :key="'navArrIt_0'+navArrIdx"
      @click="goPage(navArrIt.path)"
      :class="{'navLiAc':navArrIdx==navLiIndex}">
        <span>{{navArrIt.txt}}</span>
      </li>
    </ul>

    <div class="navRight">
      <ul>
        <li class="daibi">
          <strong>
            到期时间：
          </strong>
          <span style="cursor: auto;" @click="goPage('/platform/user/?tzLeft=1')">
            {{u_info.endtime}}
          </span>
        </li>
        <li class="daibi">
          <strong>
            积分：
          </strong>
          <span @click="goPage('/platform/user/?tzLeft=1')">
            {{u_info.amount}}
          </span>
        </li>
        <li>
          <span>
            {{u_info.username}}
          </span>
        </li>

       <!-- <li>
          <span>
            TCZbRL8PNCgsCNL2Msqr...
          </span>
        </li> -->
        <li @click="loginOut" class="loginOut">
          <span style="color: #fff;">
            退出
          </span>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  export default{
    data(){
      return{
        navArr:[
          {
            txt:"首页",
            path:"/platform/home"
          },
          {
            txt:"用户中心",
            path:"/platform/user"
          },
          {
            txt:"订单列表",
            path:"/platform/itemList"
          },
          {
            txt:"打单统计",
            path:"/platform/createItem"
          },
          {
            txt:"黑名单",
            path:"/platform/blacklist"
          },
          {
            txt:"订单结算",
            path:"/platform/settleItem"
          },
          {
            txt:"key过期时间",
            path:"/platform/key_overdue"
          },
          {
            txt:"帮助中心",
            path:"/platform/help_center"
          }
        ],
        navLiIndex:0,
        u_info:{
          address: "",
          amount: "",
          username: "",
          trad_password:null
        }
      }
    },
    watch:{
      "$store.state.set_u_info":{
        handler:function(newVal,oldVal){
          console.log("set_u_info更新：",newVal);
        },
        deep:true,
        immediate:true
      },
      $route:{
        handler:function(newVal,oldVal){
          console.log("nav_newVal:",newVal);
          let that=this;
          if(newVal.name=="Home"){
            that.navLiIndex=0;
          }else if(newVal.name=="User"){
            that.navLiIndex=1;
          }else if(newVal.name=="ItemList"){
            that.navLiIndex=2;
          }else if(newVal.name=="CreateItem"){
            that.navLiIndex=3;
          }else if(newVal.name=="Blacklist"){
            that.navLiIndex=4;
          }else if(newVal.name=="SettleItem"){
            that.navLiIndex=5;
          }else if(newVal.name=="Key_overdue"){
            that.navLiIndex=6;
          }else if(newVal.name=="Help_center"){
            that.navLiIndex=7;
          }
        },
        deep:true,
        immediate:true
      }
    },
    mounted() {
      let that=this;
      console.log("mounted_nav");
      that.get_u_info();
    },
    activated() {
      console.log("activated_nav");
    },
    created() {
      let that=this;
      this.$bus.$on("u_infoEvent",()=>{
        console.log("u_infoEvent");
        setTimeout(()=>{
          that.get_u_info();
        }, 1000);
      });
    }, 
    methods:{
      get_u_info(){
        let that=this;
        this.$request.get(
          "/api/user/info",
          {

          },
          {

          }
        ).then((res)=>{
         	console.log("用户信息请求成功：",res);
          if(res.data.code==1){
            that.u_info=res.data.data;
            this.$store.commit('set_u_info',that.u_info);
          }

         })
         .catch((err)=>{
         	console.log("用户信息请求失败：",err);
         });
      },
      loginOut(){
        let that=this;
        this.$request.post(
             `/api/user/logout`,
             {

             },
             {

             }
          ).then((res)=>{
              console.log("退出登录请求成功：",res);
              this.$bus.$emit("toastEvent",res.data.msg,res.data.code);
              setTimeout(()=>{
                console.log("退出成功!");
                window.localStorage.removeItem("token");
                that.goPage('/login');
              },1500);
          })
          .catch((err)=>{
            console.log("退出登录请求失败：",err);
            this.$bus.$emit("toastEvent",err.data.msg,0);
          });
      }
    }
  }
</script>

<style lang="less" scoped>
  .nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #001529;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .navLeft{
      overflow: hidden;
      display: flex;
      flex-direction: row;
      li{
        flex-shrink: 0;
        cursor: pointer;
        transition: .3s;
        span{
          display: block;
          color: #a6adb4;
          height: 65px;
          line-height: 65px;
          padding: 0 20px;
          font-size: 14px;
        }
      }
      li:hover{
        background-color: #ff8040;
        span{
          color: #fff;
        }
      }
      .navLiAc{
        background-color: #ff8040;
        span{
          color: #fff;
        }
      }
    }
    .navRight{
      ul{
        display: flex;
        flex-direction: row;
        align-items: center;
        li{
          flex-shrink: 0;
          position: relative;
          padding: 0 10px;
          span{
            display: block;
            color: #fff;
            font-size: 13px;
            height: 65px;
            line-height: 65px;
          }
        }

        .daibi{
          display: flex;
          flex-direction: row;
          align-items: center;
          strong{
            color: #fff;
            display: block;
            font-weight: normal;
            font-size: 13px;
            height: 65px;
            line-height: 65px;
          }
          span{
            color: #f00;
            display: block;
            cursor: pointer;
          }
        }

        .loginOut{
          cursor: pointer;
          span{
            color: #d71345;
          }
        }
      }
    }
  }
</style>
